<template>
  <div>
    <my-header :title="title[comName]"></my-header>
    <div class="main">
      <component :is="comName" :arr="list[comName]"></component>
    </div>
    <my-table-bar :arr="tabList" @changeComName="changeComName"></my-table-bar>
  </div>
</template>

<script>
import MyHeader from './components/MyHeader.vue'
import MyTableBar from './components/MyTableBar.vue'

// 动态组件
import MyGoodsList from './views/MyGoodsList.vue'
import MyGoodsSearch from './views/MyGoodsSearch.vue'
import MyUserInfo from './views/MyUserInfo.vue'

// 导入bootstrap和axios（临时使用）
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-icons/font/bootstrap-icons.css'
import axios from 'axios'
axios.defaults.baseURL = 'https://test.com'

export default {
  components: { MyHeader, MyTableBar, MyGoodsList, MyGoodsSearch, MyUserInfo },
  data () {
    return {
      comName: 'MyGoodsList',
      tabList: [
        {
          iconText: 'bi-card-list',
          text: '商品列表',
          componentName: 'MyGoodsList'
        },
        {
          iconText: 'bi-search',
          text: '商品搜索',
          componentName: 'MyGoodsSearch'
        },
        {
          iconText: 'bi-person',
          text: '我的信息',
          componentName: 'MyUserInfo'
        }
      ],
      title: {
        MyGoodsList: '商品列表',
        MyGoodsSearch: '商品搜索',
        MyUserInfo: '我的信息'
      },
      list: {
        MyGoodsList: [],
        MyGoodsSearch: [],
        MyUserInfo: []
      }
    }
  },
  // 实例创建后
  async created () {
    // 商品列表
    if (this.comName === 'MyGoodsList') {
    // const { data } = await axios({ url: '/api/goods' })
    // this.list[this.comName] = data.data
      this.list[this.comName] = [
        {
          id: 1,
          goods_name: 'Teenmix/天美意夏季专柜同款金色布女鞋6YF18BT6',
          goods_price: 298,
          tags: [
            '舒适',
            '透气'
          ],
          inputVisible: false,
          inputValue: ''
        },
        {
          id: 2,
          goods_name: '奥休斯(all shoes) 冬季保暖女士休闲雪地靴 舒适加绒防水短靴 防滑棉鞋子',
          goods_price: 89,
          tags: [
            '保暖',
            '防滑'
          ],
          inputVisible: false,
          inputValue: ''
        },
        {
          id: 3,
          goods_name: '初语秋冬新款毛衣女 套头宽松针织衫简约插肩袖上衣',
          goods_price: 199,
          tags: [
            '秋冬',
            '毛衣'
          ],
          inputVisible: false,
          inputValue: ''
        }]
    }
  },
  methods: {
    changeComName (comName) {
      this.comName = comName
    }
  }
}
</script>

<style>
.main{
  padding-top: 45px;
  padding-bottom: 51px;
}
</style>
